<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
    <style>
      div {
        background-color: coral;
        border: 1px solid;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <p>该实例演示了在添加事件监听时冒泡与捕获阶段的不同。</p>
    <div id="myDiv"><p id="myP">点击该段落， 我是冒泡</p></div>
    <br />
    <div id="myDiv2"><p id="myP2">点击该段落， 我是捕获</p></div>
    <div id="btn1">
      <button>btn1</button>
    </div>
    <div>
      <input type="text" name="" id="text1" />
      <button id="btn2">btn2</button>
    </div>
    <script>
      document.getElementById('myP').addEventListener(
        'click',
        function() {
          alert('你点击了 P 元素!');
        },
        false
      );
      document.getElementById('myDiv').addEventListener(
        'click',
        function() {
          alert('你点击了 DIV 元素!');
        },
        false
      );
      document.getElementById('myP2').addEventListener(
        'click',
        function() {
          alert('你点击了 P 元素!');
        },
        true
      );
      document.getElementById('myDiv2').addEventListener(
        'click',
        function() {
          alert('你点击了 DIV 元素!');
        },
        true
      );
      var btn1 = document.getElementById('btn1');
      console.log(btn1);
      btn1.addEventListener('mouseenter', function() {
        console.log('mouseenter');
      });
      btn1.addEventListener('mouseleave', function() {
        console.log('mouseleave');
      });
      var text1 = document.getElementById('text1');
      var btn2 = document.getElementById('btn2');
      btn2.addEventListener('click', function() {
        console.log(text1.innerHTML);
        // text1.value = '123';
      });
    </script>
  </body>
</html>
